<template>
  <data-table-app-page>
    <div slot="toolbar">
      <el-form inline :model="searchForm">
        <el-form-item label="任务编号">
          <el-input
            v-model="searchForm.serviceId"
            clearable
            style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <type-select
            v-model="searchForm.status"
            :items="DictMan.items('volunteer.orderStatus')"
            style="width: 120px"
            v-slot="{item}"
          >
            <status-tag :status="item.value" />
          </type-select>
        </el-form-item>
        <el-form-item label="接单时间">
          <el-date-picker
            v-model="createTimes"
            format ="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            align="right"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            style="width:240px;"
          />
        </el-form-item>
        <el-form-item v-if="app.admin.roleId != 9" label="所属社区">
          <org-select v-model="searchForm.orgId" />
        </el-form-item>
        <el-form-item>
          <data-table-query-button :query-params="() => ({
              ...searchForm,
              ...(createTimes ? {startCreateTime: createTimes[0], endCreateTime: createTimes[1]} : {})
            })" />
        </el-form-item>
      </el-form>
      <el-button
        type="warning"
        :plain="!this.selections.length"
        icon="el-icon-check"
        @click="onBatchReviewClick">批量审核</el-button>
    </div>
    <data-table
      ref="table"
      url="/api/volunteer/order/page"
      lazy
      :select-on-indeterminate="false"
      @select-all="onSelectAll"
      @select="onSelect"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="42" />
      <el-table-column prop="orderno" label="订单号" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="serviceId" label="所属任务编号" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orgName" label="所属社区" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="订单状态" width="100" v-slot="{row}">
        <status-tag :status="row.status" />
      </el-table-column>
      <el-table-column prop="receiveUserName" label="志愿者用户" width="100"></el-table-column>
      <el-table-column prop="createTime" label="接单时间" width="152"></el-table-column>=
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button
            @click="onDetailsClick(row)"
          >
            详情
          </el-button>
          <el-button
            v-if="Review.canReview(row)"
            type="warning"
            plain
            @click="onReviewClick(row)"
          >
            审核
          </el-button>
        </template>
      </el-table-column>
    </data-table>

    <review ref="review" />
  </data-table-app-page>
</template>

<script>
import { Select } from 'element-ui';
import Review from './Review';
import StatusTag from './StatusTag';

export default {
  pageProps: {
    title: '志愿者订单'
  },
  components: {
    OrgSelect: () => ({ component: import('@/pages/org/OrgSelect.vue'), loading: Select, delay: 0 }),
    Review,
    StatusTag
  },
  data() {
    this.app = app;
    return {
      searchForm: {
        serviceId: this.$params.help && this.$params.help.serviceId
      },
      createTimes: null,
      selections: [],
      Review
    }
  },
  mounted() {
    this.$refs.table.query(this.searchForm);
  },
  methods: {
    onAddClick() {
      this.$message.info('等待开发完成，请先用app发布');
      return;
      this.pushPage({
        path: '/volunteer/help/edit',
        key: 'add',
        params: {
          mode: 'add',
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        }
      });
    },
    onDetailsClick(order) {
      this.pushPage({
        path: '/volunteer/order/details',
        key: order.orderno,
        params: {
          order
        }
      });
    },
    onBatchReviewClick() {
      if (!this.selections.length) {
        this.$message.warning('您还未勾选要审核的订单');
        return;
      }
      this.$refs.review.show(this.selections, () => {
        this.selections = [];
        this.$refs.table.clearSelection();
      });
    },
    onReviewClick(order) {
      this.$refs.review.show([order], () => {
        this.selections = [];
        this.$refs.table.clearSelection();
      });
    },
    onReceiverInputFocus() {
      this.searchForm.receiveUser = null;
      this.receiverName = null;
      this.$refs.userQuerySelector.show({
        onOk: (user) => {
          this.searchForm.receiveUser = user.id;
          this.receiverName = user.realName || user.aliasName;
          return true;
        }
      });
    },
    onSelectAll(selections) {
      if (selections.length) {
        selections = [...selections];
        setTimeout(() => {
          selections.forEach(row => {
            if (!Review.canReview(row)) {
              this.$refs.table.toggleRowSelection(row, false);
            }
          });
        }, 0);
      }
    },
    onSelectionChange(selections) {
      this.selections = selections;
    },
    onSelect(selection, row) {
      if (row && !Review.canReview(row)) {
        this.$message.warning('该订单不能进行审核');
        setTimeout(() => {
          this.$refs.table.toggleRowSelection(row, false);
        }, 0);
      }
    }
  }
}
</script>